<template>
  <div>
    <BasicForm @register="registerForm" ref="formRef" />
    <!-- 子表单区域 -->
    <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
      <a-tab-pane tab="订单分配执行记录" key="nurseUserOrdersNursesExecute" :forceRender="true">
        <JVxeTable keep-source resizable ref="nurseUserOrdersNursesExecute"
          v-if="nurseUserOrdersNursesExecuteTable.show" :loading="nurseUserOrdersNursesExecuteTable.loading"
          :columns="nurseUserOrdersNursesExecuteTable.columns"
          :dataSource="nurseUserOrdersNursesExecuteTable.dataSource" :height="340" :rowNumber="true"
          :rowSelection="true" :disabled="formDisabled" :toolbar="true" />
      </a-tab-pane>
    </a-tabs>

    <div style="width: 100%;text-align: center" v-if="!formDisabled">
      <a-button @click="handleSubmit" pre-icon="ant-design:check" type="primary">提 交</a-button>
    </div>
  </div>
</template>

<script lang="ts">

import { BasicForm, useForm } from '/@/components/Form/index';
import { computed, defineComponent, reactive, ref, unref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { propTypes } from '/@/utils/propTypes';
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods';
import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils';
import { getBpmFormSchema, nurseUserOrdersNursesExecuteColumns } from '../NurseUserOrdersNurses.data';
import { saveOrUpdate, nurseUserOrdersNursesExecuteList } from '../NurseUserOrdersNurses.api';

export default defineComponent({
  name: "NurseUserOrdersNursesForm",
  components: {
    BasicForm,
  },
  props: {
    formData: propTypes.object.def({}),
    formBpm: propTypes.bool.def(true),
  },
  setup(props) {
    const [registerForm, { setFieldsValue, setProps }] = useForm({
      labelWidth: 150,
      schemas: getBpmFormSchema(props.formData),
      showActionButtonGroup: false,
      baseColProps: { span: 24 }
    });

    const formDisabled = computed(() => {
      if (props.formData.disabled === false) {
        return false;
      }
      return true;
    });

    const refKeys = ref(['nurseUserOrdersNursesExecute',]);
    const activeKey = ref('nurseUserOrdersNursesExecute');
    const nurseUserOrdersNursesExecute = ref();
    const tableRefs = { nurseUserOrdersNursesExecute, };
    const nurseUserOrdersNursesExecuteTable = reactive({
      loading: false,
      dataSource: [],
      columns: nurseUserOrdersNursesExecuteColumns,
      show: false
    })

    const [handleChangeTabs, handleSubmit, requestSubTableData, formRef] = useJvxeMethod(requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys, validateSubForm);

    function classifyIntoFormData(allValues) {
      let main = Object.assign({}, allValues.formValue)
      return {
        ...main, // 展开
        nurseUserOrdersNursesExecuteList: allValues.tablesValue[0].tableData,
      }
    }

    //表单提交事件
    async function requestAddOrEdit(values) {
      await saveOrUpdate(values, true);
    }

    const queryByIdUrl = '/nurse_user_orders_nurses/nurseUserOrdersNurses/queryById';
    async function initFormData() {
      let params = { id: props.formData.dataId };
      const data = await defHttp.get({ url: queryByIdUrl, params });
      //设置表单的值
      await setFieldsValue({ ...data });
      requestSubTableData(nurseUserOrdersNursesExecuteList, { id: data.id }, nurseUserOrdersNursesExecuteTable, () => {
        nurseUserOrdersNursesExecuteTable.show = true;
      });
      //默认是禁用
      await setProps({ disabled: formDisabled.value })
    }

    initFormData();

    return {
      registerForm,
      formDisabled,
      formRef,
      handleSubmit,
      activeKey,
      handleChangeTabs,
      nurseUserOrdersNursesExecute,
      nurseUserOrdersNursesExecuteTable,
    }
  }
});
</script>